<template>
  <div class="goodsItem" @click="handleLink(goodsItem.iid)">
   <img :src="goodsImage" alt="" >
   <div class="goodsInfo">
     <p>{{goodsItem.title}}</p>
     <span class="price">{{goodsItem.price}}</span>
     <span class="collection">{{goodsItem.cfav}}</span>
   </div>
  </div>
</template>

<script>
  export default {
    props:{
      goodsItem:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    methods:{
      //一旦 图片加载完成 调用这个函数向外发送事件
      handleLoaded(){
        this.$bus.$emit('hasLoaded')
      },
      //跳转到详情页
      handleLink(iid){
        // 使用query传值
        //this.$router.push('/detail'，{query:iid})
        // 使用路由传参的方式传值
        this.$router.push('/detail/'+iid)
      }
    },
    computed:{
      goodsImage(){
        return this.goodsItem.image||this.goodsItem.img||this.goodsItem.show.img
      }
    }
  }
</script>

<style scoped>
  .goodsItem{
    width:48%;
    padding-bottom:40px;
    position:relative;

  }
  .goodsItem img{
    width:100%;
    vertical-align:center;
    border-radius:5px;
  }
  .goodsInfo{
    position:absolute;
    font-size:12px;
    bottom:5px;
    left:0;
    right:0;
    over-flow:hidden;
    text-align:center;
  }
  .goodsInfo p{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 3px;;
  }
  .goodsInfo .price{
    color: #ff5777;
  }
  .goodsInfo .collection{
    margin-left:20px;
    position:relative;
  }
  .goodsInfo .collection::before{
    position:absolute;
    content:'';
    width:14px;
    height:14px;
    left:-15px;
    background:url("~assets/images/detail/collect.png") 0 0/14px 14px;
  }
</style>
